import type { Metadata } from 'next';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { t } from '@/i18n';
import { api, isNotBuilt, isNotFound, safe } from '@/lib/api';
import { apiAnalytics } from '@/lib/api-analytics';
import { apiExplore } from '@/lib/api-explore';
import { regionShort } from '@/lib/regions';
import { jsonLd, jsonLdString, seoTitle } from '@/lib/seo';
import { routes } from '@/lib/site';
import { HEADLINE_TOPIC, type HEADLINE_INDICATORS } from '@/lib/topics';
import type { CountryResponse, FormatSpec } from '@/lib/types';
import { CountryHeader } from '@/components/country/country-header';
import { CountryStory } from '@/components/country/country-story';
import { DnaPanel } from '@/components/country/dna-panel';
import { KeyFacts } from '@/components/country/key-facts';
import { SimilarPanel } from '@/components/country/similar-panel';
import { Timeline } from '@/components/country/timeline';
import { CountryTopicsGrid } from '@/components/country/topics-grid';
import { ChangeList } from '@/components/data/change-list';
import { NotBuiltState } from '@/components/data/empty-state';
import { Metric, MetricGrid } from '@/components/data/metric';
import { Section } from '@/components/data/section';
import { TopicNav } from '@/components/data/topic-nav';

export const revalidate = 900;

type Params = { slug: string };

async function loadCountry(slug: string): Promise<CountryResponse | 'not-built' | null> {
  try {
    return await api.country(slug);
  } catch (e) {
    if (isNotFound(e)) return null;
    if (isNotBuilt(e)) return 'not-built';
    throw e;
  }
}

export async function generateMetadata({ params }: { params: Promise<Params> }): Promise<Metadata> {
  const { slug } = await params;
  const data = await loadCountry(slug);
  if (!data || data === 'not-built') return { title: t('country.notFound'), robots: { index: false } };
  const name = data.country.name ?? slug;
  const title = seoTitle.country(name);
  const description = t('country.description', { name });
  const canonical = routes.country(data.country.slug ?? slug);
  return {
    title: { absolute: `${title} | ${t('site.name')}` },
    description,
    alternates: { canonical },
    openGraph: { title: `${title} | ${t('site.name')}`, description, url: canonical, type: 'article' },
    twitter: { card: 'summary_large_image', title, description },
  };
}

export default async function CountryPage({ params }: { params: Promise<Params> }) {
  const { slug } = await params;
  const data = await loadCountry(slug);
  if (data === null) notFound();
  if (data === 'not-built') return <NotBuiltState />;

  const c = data.country;
  const id = c.id;
  const name = c.name ?? id;
  const countryRef = { id, slug: c.slug ?? slug, name, flag: c.flag };
  // Optional panels in parallel; each tolerates failure independently.
  const [changes, similar, insights, dna, events, story, quality, indicators] = await Promise.all([
    safe(api.countryChanges(id, 8)),
    safe(api.countrySimilar(id, 'overall', 8)),
    safe(api.countryInsights(id)),
    safe(api.countryDna(id)),
    safe(api.countryEvents(id, 120)),
    safe(apiAnalytics.countryStory(id)),
    safe(apiAnalytics.countryQuality(id)),
    safe(apiExplore.indicators({ with_data: true })),
  ]);
  const counts = Object.fromEntries(data.topics.map((tp) => [tp.id, tp.n_with_data]));
  const withData = data.topics.reduce((a, tp) => a + tp.n_with_data, 0);
  const formats: Record<string, FormatSpec> = Object.fromEntries((indicators?.items ?? []).map((i) => [i.slug, { format: i.format, unit: i.unit, unit_short: i.unit_short, precision: i.precision, name: i.short_name ?? i.name, higher_is_better: i.higher_is_better }]));
  const ld = [jsonLd.country({ slug: c.slug ?? slug, name, iso3: c.iso3 ?? id, capital: c.capital }), jsonLd.breadcrumbs([{ name: t('nav.countries'), path: routes.countries() }, { name, path: routes.country(c.slug ?? slug) }])];

  return (
    <>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: jsonLdString(ld) }} />
      <CountryHeader data={data} quality={quality} />
      <TopicNav slug={c.slug ?? slug} counts={counts} />

      <Section id="headline" title={t('country.headline.title')} subtitle={t('country.headline.sub')} className="border-t-0">
        <MetricGrid>
          {data.headline.map((m) => {
            const topic = HEADLINE_TOPIC[m.indicator as (typeof HEADLINE_INDICATORS)[number]];
            return <Metric key={m.indicator} metric={m} country={countryRef} regionName={regionShort(c.region) ?? c.region_name} href={topic ? routes.countryIndicator(c.slug ?? slug, topic, m.indicator) : null} />;
          })}
        </MetricGrid>
      </Section>

      {story && story.items.length ? (
        <Section id="story" title={t('country.story.title', { name })} subtitle={t('country.story.sub', { since: story.since ?? '', n: story.items.length })}>
          <CountryStory data={story} country={countryRef} />
        </Section>
      ) : null}

      <div className="grid gap-x-10 lg:grid-cols-2">
        <Section id="changes" title={t('country.changes.title', { name })} subtitle={t('country.changes.sub')} actions={<Link href={`${routes.changes()}?country=${c.slug ?? id}`} className="text-accent hover:underline">{t('common.seeAll')} →</Link>}>
          <ChangeList items={changes?.items ?? []} />
        </Section>
        <Section id="similar" title={t('country.similar.title', { name })} subtitle={t('country.similar.sub')}>
          <SimilarPanel countryId={id} countrySlug={c.slug} countryName={name} initial={similar} formats={formats} />
        </Section>
      </div>

      <div className="grid gap-x-10 lg:grid-cols-[minmax(0,2fr)_minmax(0,3fr)]">
        <Section id="dna" title={t('country.dna.title')} subtitle={t('country.dna.sub')}>
          <DnaPanel countryId={id} name={name} initial={dna} />
        </Section>
        <Section id="facts" title={t('country.facts.title')} subtitle={t('country.facts.sub')}>
          <KeyFacts items={insights?.items ?? []} country={countryRef} />
          {c.languages?.length ? (
            <p className="mt-4 text-sm text-ink-2">
              <span className="text-ink-3">{t('country.languages')}: </span>
              {c.languages.join(', ')}
            </p>
          ) : null}
          {data.groups.length ? (
            <p className="mt-1 flex flex-wrap items-baseline gap-x-2 gap-y-1 text-sm text-ink-2">
              <span className="text-ink-3">{t('country.memberOf')}: </span>
              {data.groups
                .filter((g) => g.kind === 'org')
                .map((g) => (
                  <Link key={g.id} href={routes.region(g.slug ?? g.id)} className="link-quiet -my-2 inline-flex min-h-[44px] items-center py-2 md:my-0 md:min-h-0 md:py-0 text-ink hover:text-accent">
                    {g.name}
                  </Link>
                ))}
            </p>
          ) : null}
        </Section>
      </div>

      <Section id="timeline" title={t('country.timeline.title')} subtitle={t('country.timeline.sub')}>
        <Timeline items={events?.items ?? []} slug={c.slug ?? slug} />
      </Section>

      <Section id="topics" title={t('country.topics.title', { name })} subtitle={t('country.topics.sub', { n: data.topics.length, m: withData })}>
        <CountryTopicsGrid slug={c.slug ?? slug} topics={data.topics} />
      </Section>
    </>
  );
}